<template>
  <a-card title="问卷表单设计">
    <vp-questionnaire-design-form
      ref="questionnaireRef"
    ></vp-questionnaire-design-form>
    <a-button @click="submit">提交</a-button>
  </a-card>
  <a-card title="问卷预览">
    <vp-questionnaire-form-preview
      ref="questionnairePreviewRef"
      :is-mobile="true"
      :fields="fields"
      :carousel-props="{
        afterChange: afterChange,
      }"
    ></vp-questionnaire-form-preview>
    <a-button @click="submit">提交</a-button>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { VpDynamicForm } from "@vue-ant-plus/components";
import { useModal } from "@vue-ant-plus/hooks";
const questionnaireRef = ref<any>(null);
const questionnairePreviewRef = ref<any>(null);
const fields = JSON.parse(
  '[{"question":"dasd","jumps":[2,null],"id":0,"choices":["asdasdsa大萨达","是放松的方式"],"questionType":1,"required":false},{"question":"大声道撒多撒","jumps":[null],"id":1,"choices":[null],"questionType":3,"required":false},{"question":"阿斯顿撒多撒","jumps":[1],"id":2,"choices":["发低烧"],"questionType":1,"required":false},{"question":"阿斯顿撒","jumps":[2],"id":3,"choices":["asdasdsa大萨达","阿斯顿撒多撒"],"questionType":2,"required":false}]'
);
const afterChange = (index) => {
  console.log(index);
};
const submit = () => {
  questionnaireRef.value.validated().then((val) => {
    console.log(val);
  });
  const modal = useModal({
    title: "123",
    content: VpDynamicForm,
    componentParams: {
      formSchema: {
        formItem: [
          {
            type: "Input",
            label: "大萨达奥",
            field: "name",
            value: "",
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "InputNumber",
            label: "大萨达奥",
            field: "name1",
            value: "",
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "Radio",
            label: "Radio",
            field: "Radio",
            value: "",
            props: {
              placeholder: "请输入任务名称",
            },
            options: [
              {
                label: "123",
                value: 1,
              },
              {
                label: "Dddasd",
                value: 2,
              },
            ],
          },
          {
            type: "Checkbox",
            label: "Checkbox",
            field: "Checkbox",
            value: [],
            props: {
              placeholder: "请输入任务名称",
            },
            options: [
              {
                label: "123",
                value: 1,
              },
              {
                label: "Dddasd",
                value: 2,
              },
            ],
          },
          {
            type: "Select",
            label: "Select",
            field: "Select",
            value: [],
            props: {
              placeholder: "请输入任务名称",
            },
            options: [
              {
                label: "123",
                value: 1,
              },
              {
                label: "Dddasd",
                value: 2,
              },
            ],
          },
          {
            type: "Switch",
            label: "Switch",
            field: "Switch",
            value: false,
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "DatePicker",
            label: "DatePicker",
            field: "DatePicker",
            value: "",
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "TimePicker",
            label: "TimePicker",
            field: "TimePicker",
            value: "",
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "Slider",
            label: "Slider",
            field: "Slider",
            value: 0,
            props: {
              placeholder: "请输入任务名称",
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
          {
            type: "Upload",
            label: "Upload",
            field: "Upload",
            value: "",
            props: {
              name: "avatar",
              slots: {
                //default: () => (createVNode('div',{},123))
              },
            },
            rules: [
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
          },
        ],
      },
    },
    componentSlots: {
      default: () => "21321",
    },
    okText: "确定1",
    cancelText: "取消1",
    handleOk: ({ remove, instance }) => {
      instance.validated().then(() => {});
      // return new Promise<void>((resolve, reject) => {
      //   instance.validated().then(() => {});
      //   console.log(instance);
      // });
    },
  });

  // questionnaireRef.value.validated().then((res) => {
  //   console.log(res);
  // });
};
</script>
